<template>
  <div>
    <!-- 采购单详情 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">采购单详情</el-button>
      </div>
    </div>
    <div class="details">
      <div class="title_right">
        未审核、未报价的面板展示。本提示不计算页面布局
      </div>
      <div class="title_da">采购单详情</div>

      <!--表单嵌套表格 -->
      <div class="h3">采购商品</div>

      <el-form ref="forms" :model="forms">
        <el-table
          ref="multipleTable"
          :data="forms.tableData"
          tooltip-effect="dark"
          border
          style="width: 90%"
          :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
          class="tab"
        >
          <el-table-column label="商品名称" width="242" align="center">
            <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.idcard`">
                <el-input
                  type="text"
                  placeholder="输入商品名称"
                  v-model="row.idcard"
                  class="inp"
                >
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="商品分类" width="242" align="center">
            <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.idcard`">
                <el-input
                  type="text"
                  placeholder="输入商品名称"
                  v-model="row.idcard"
                  class="inp"
                >
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="采购量" width="242" align="center">
            <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.idcard`">
                <el-input
                  type="text"
                  placeholder="输入商品名称"
                  v-model="row.idcard"
                  class="inp"
                >
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="单位" width="242" align="center">
            <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.idcard`">
                <el-input
                  type="text"
                  placeholder="输入商品名称"
                  v-model="row.idcard"
                  class="inp"
                >
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="目标单价" width="242" align="center">
            <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.idcard`">
                <el-input
                  type="text"
                  placeholder="输入商品名称"
                  v-model="row.idcard"
                  class="inp"
                  disabled
                >
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="采购周期" align="center">
            <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.idcard`">
                <el-input
                  type="text"
                  placeholder="输入商品名称"
                  v-model="row.idcard"
                  class="inp"
                >
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <div class="h3">采购需求</div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <!-- 采购类型* -->
        <div style="display: flex">
          <el-form-item label="采购类型" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="全新" name="type" />
              <el-checkbox label="二手或回收" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否需要发票" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="不需要发票" name="type" />
              <el-checkbox label="增值税专用发票" name="type" />
              <el-checkbox label="增值税普通发票" name="type" />
            </el-checkbox-group>
          </el-form-item>
        </div>

        <el-form-item label="备注" prop="desc">
          <el-input
            v-model="ruleForm.desc"
            type="textarea"
            class="text"
            placeholder="请填写备注"
          />
          <div style="color: #c7cbd3">
            填写完善的说明，有助于供应商更好了解您的采购需求，更快完成采购
          </div>
        </el-form-item>
      </el-form>

      <div class="h3">采购联系人</div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <!-- 采购类型* -->
        <div style="display: flex">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" class="inp" />
          </el-form-item>
          <el-form-item label="" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="先生" name="type" />
              <el-checkbox label="女士" name="type" />
            </el-checkbox-group>
          </el-form-item>
        </div>

        <el-form-item label="电话" prop="name">
          <div style="display: flex">
            <el-input v-model="ruleForm.name" class="inp" />
            <p class="ml10">或</p>
            <el-input v-model="ruleForm.name" class="inp ml10" />
            <el-input v-model="ruleForm.name" />
            <!-- <p>至少一个</p> -->
          </div>
        </el-form-item>
        <div class="footer">
          <el-button class="btn" style="background-color: #fff">取消</el-button>
          <el-button type="primary" class="btn"> 立即发布 </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import top from "../../../components/top/top.vue";
// css
import "../../../assets/css/size.css";
// 表单嵌套表格
const forms = reactive({
  tableData: [
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove",
    },
  ],
});

const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "Hello",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style>
.el-textarea__inner {
  width: 1073px;
  height: 80px;
  background: #ffffff;
  border: 1px solid #dcdfe5;
  opacity: 1;
  border-radius: 4px;
}
</style>
<style lang="scss" scoped>
.details {
  // width: 1610px;
  height: 930px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  margin: 10px 0 0 10px;

  .title_right {
    width: 432px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #ff4848;
    opacity: 1;
    float: right;
    margin: 20px 25px 0 0;
  }
  .title_da {
    width: 190px;
    height: 38px;
    font-size: 38px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    opacity: 1;
    margin: 0 auto;
    padding: 20px;
  }
  .tab {
    margin: 10px 60px 20px 80px;
  }
  .h3 {
    width: 80px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #333333;
    opacity: 1;
    border-left: 3px solid #acacac;
    margin: 0 0 20px 80px;
    padding-left: 5px;
  }
  .xian {
    // width: 1610px;
    height: 1px;
    background: #dcdfe5;
    opacity: 1;
    border-radius: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .footer {
    // width: 1610px;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 210px;
  }
}

.demo-ruleForm {
  margin-left: 30px;
}

.ml10 {
  font-size: 14px;
  font-weight: 400;
  color: #acacac;
  opacity: 1;
}
</style>
